<template>
    {{ fileList }}
    <el-upload action="#" :show-file-list="true" v-model:file-list="fileList" :disabled="config.disabled" :limit="config.limit"
        list-type="picture-card" :http-request="customUpload" :before-upload="beforeAvatarUpload">
        <el-icon>
            <Plus />
        </el-icon>
        <template #file="{ file }">
            <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                    <span v-if="config.showPreview" class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)">
                        <el-icon><ZoomIn /></el-icon>
                    </span>
                    <span v-if="config.showDownload" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <el-icon>
                            <Download />
                        </el-icon>
                    </span>
                    <span v-if="config.showRemove" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </span>
                </span>
            </div>
        </template>
    </el-upload>
    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { UploadFile } from 'element-plus'
import { uploadApi } from '@/utils/api/upload'

// 定义接收的属性
const props = defineProps({
    config: {
        type: Object,
        default: () => ({
            size: 100,
            accept: ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'],
            disabled: false,
            limit: 10,
            showPreview: true,
            showRemove: true,
            showUpload: true,
        })
    },
    modelValue: {
        type: Array,
        default: () => [] 
    }
});
console.log(props.modelValue,'jjbb')

// 定义要触发的事件
const emits = defineEmits(['update:modelValue']);

const { config } = props;
const fileList = ref([...props.modelValue]); // 创建一个本地副本

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
    // const index = fileList.value.findIndex(item => item === file);
    // if (index !== -1) {
    //     fileList.value.splice(index, 1);
    //     emits('update:modelValue', fileList.value); // 更新父组件的 fileList
    // }
    // console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
    // dialogImageUrl.value = file.url!
    // dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
    console.log(file)
}

const beforeAvatarUpload = (rawFile) => {
    const type = ref(false)
    for (var i in config.accept) {
        if (rawFile.type == config.accept[i]) {
            type.value = true
        }
    }
    if (type.value == false) {
        ElMessage.error('文件类型错误!')
        return false
    } else if (rawFile.size / 1024 > 1024) {
        ElMessage.error('文件不能大于 1mb!')
        return false
    }
    return true
}

const customUpload = async (params) => {
    // const res = await uploadApi.uploadimgs(params.file)
    // if (res.code === 200) {
        // fileList.value.push(res.data);
        // emits('update:modelValue', fileList.value); // 更新父组件的 fileList
        // ElMessage.success(res.message)
    // } else {
        // ElMessage.error(res.message)
    // }
};
</script>